<template>
  <div>
    <!-- <button @click="closeDialog">点击显示对话框</button> -->
    <el-button type="primary" @click="closeDialog">点击显示对话框</el-button>
    <div class="dialog" :style="{width:width}" v-show="isvisible"> 
      <div class="header">
        <div class="title">{{title}}</div>
        <div class="close" v-if="showClose" @click="handleClose"><i class="el-icon-circle-close"></i></div>
      </div>
      <div class="content">
        用户名：<input type="text"><br>
        用户密码：<input type="password">
      </div>
      <div class="footer">
        <button class="isShow1" v-if="showClose" @click="handleClose">取消</button>
        <button class="isShow2" v-if="showClose" @click="handleClose">确定</button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'dialogModal',
  // props: ["title", "width"]
  props:{
    title:{
      type:String,
      default:"输入用户信息"
    },
    width:{
      type:[Number,String],
      default:"500"
    },
    visible:{
      type:[Boolean,String],
      default:false
    },
    //是否显示关闭按钮
    showClose:{
      type:Boolean,
      default:true
    }
  },
  data(){
    return {
      isvisible:false
    }
  },

  methods:{
    closeDialog(){
      this.isvisible=true
    },
    handleClose(e){
      this.isvisible=false
      this.$emit('click',e)
    }
  }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.dialog{
  width:450px;
  height:250px;
  margin:0 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  border:2px solid #ccc;
  background: #ccc00c;
  border-radius: 10px;
}
.title{
  margin-left:25px;
  float: left;
}
.close{
  margin-right:25px;
  width:36px;
  height:36px;
  float: right;
}
.content{
  margin:0 auto;
  line-height: 50px;
  width:250px;
}
.footer > button{
  width:80px;
  height:30px;
  margin-right:20px;
  margin-left:20px;
}
.isShow1{
  background-color: #ccc;
}
.isShow2{
  background-color: #0000ff;
}
</style>
